<!DOCTYPE html>
<html>
<head>
    <title>LUI组件库</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
    <meta name="format-detection" content="telephone=no" />
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Pragma" content="no-cache">
    <meta name="keywords" content="LUI，轻量级移动端UI组件库"/>
    <meta name="description" content="LUI，基于html,css,js原生能力驱动，轻量级移动端UI组件库。LUI不是框架，她只是为你的应用提供基础的UI组合以及一些常用方法，架构层面随你自行组织" />
    <link rel="icon" href="images/icon/lui.png">
    <link rel="stylesheet" type="text/css" href="css/lui.css" />
    <style>
        .placeholder {margin: 5px;padding: 10px;background-color: var(--primary_color);color: #fff}
    </style>

  <script type="text/javascript" src="js/demo.js"></script>
</head>
<body>
    <div class="ui_page_wrap">
        <header class="ui_page_hd"><a href="javascript:goBack();" class="ui_back"></a>布局</header>
        <div class="ui_page_bd">
            <p class="ui_con_block">
                早期的网页很简单，主要是table布局，web2.0时代，div+css布局方式更被推荐，浮动布局流行起来，再到后来移动端时代，更灵活的flex布局成为优选。
            </p>
            <!-- ///[htmldemo] -->
            <section class="p15">
                <div class="ui_titleBar_wrap"><h2 class="ui_titleBar">水平方向</h2></div>
                <div class="ui_flex">
                    <div class="ui_flex_item"><p class="placeholder">flexbox</p></div>
                </div>
                <div class="ui_flex">
                    <div class="ui_flex_item"><p class="placeholder">flexbox</p></div>
                    <div class="ui_flex_item"><p class="placeholder">flexbox</p></div>
                </div>
                <div class="ui_flex">
                    <div class="ui_flex_item"><p class="placeholder">flexbox</p></div>
                    <div class="ui_flex_item"><p class="placeholder">flexbox</p></div>
                    <div class="ui_flex_item"><p class="placeholder">flexbox</p></div>
                </div>
                <div class="ui_flex">
                    <div class="ui_flex_item"><p class="placeholder">flexbox</p></div>
                    <div class=""><p class="placeholder">flexbox</p></div>
                    <div class=""><p class="placeholder">flexbox</p></div>
                </div>
                <div class="ui_flex">
                    <div class=""><p class="placeholder">flexbox</p></div>
                    <div class="ui_flex_item"><p class="placeholder">flexbox</p></div>
                    <div class=""><p class="placeholder">flexbox</p></div>
                </div>
            </section>
            <section class="p15">
                <div class="ui_titleBar_wrap"><h2 class="ui_titleBar">垂直对齐</h2></div>
                <div class="ui_flex ui_flex_center">
                    <div class="">
                        <p class="placeholder">flexbox</p>
                        <p class="placeholder">flexbox</p>
                    </div>
                    <div class="ui_flex_item"><p class="placeholder">flexbox</p></div>
                    <div class=""><p class="placeholder">flexbox</p></div>
                </div>
                <div class="ui_flex ui_flex_end">
                    <div class="">
                        <p class="placeholder">flexbox</p>
                        <p class="placeholder">flexbox</p>
                    </div>
                    <div class="ui_flex_item"><p class="placeholder">flexbox</p></div>
                    <div class=""><p class="placeholder">flexbox</p></div>
                </div>
            </section>
            <section class="p15">
                <div class="ui_titleBar_wrap"><h2 class="ui_titleBar">自动换行</h2></div>                
                <div class="ui_flex ui_flex_wrap">
                    <div class=""><p class="placeholder">flexbox</p></div>
                    <div class=""><p class="placeholder">flexbox</p></div>
                    <div class=""><p class="placeholder">flexbox</p></div>
                    <div class=""><p class="placeholder">flexbox</p></div>
                    <div class=""><p class="placeholder">flexbox</p></div>
                </div>
            </section>
            <!-- ///[htmldemo] -->
        </div>
    </div>
</body>
</html>